<template>
    <div class="f-tabs">
        <slot></slot>
    </div>
</template>

<script>
  import Vue from 'vue';

  export default {
    name: "f-tabs"
    , props: {
      selected: {
        type: String
        , required: true
      }
      , direction: {
        type: String
        , default: 'horizontal'
        , validator(value) {
          return ['horizontal', 'vertical'].indexOf(value) >= 0;
        }
      }
    }
    , data() {
      return {
        eventBus: new Vue()
      }
    }
    , created() {
      // this.$emit('update:selected', 'xxx');
    }

    , methods: {
      checkChildren() {
        if (this.$children.length === 0) {
          // throw new Error('tabs的子组件应该是tabs-head和tabs-nav')
          console.warn('tabs的子组件应该是tabs-head和tabs-nav')
        }
      }
      , selectTab() {
        this.$children.forEach((vm) => {
          if (vm.$options.name === 'f-tabs-head') {
            vm.$children.forEach((item) => {
              if (item.$options.name === 'f-tabs-item' && item.name === this.selected) {
                this.eventBus.$emit('update:selected', this.selected, item);
              }
            })
          }
        });
      }
    }
    , mounted() {
      this.checkChildren();
      this.selectTab();
    }
    , provide() {
      return {
        eventBus: this.eventBus
      }
    }
  }
</script>

<style lang="scss">
    .f-tabs {}
</style>
